<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            background-color: #f00;
        }

        .a {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            background-color: #ff0;
        }

        .a1 {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            background-color: #000;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="a">
            <div class="a1"></div>
        </div>
    </div>

    <script>

        // 事件流：页面接受事件的顺序

        // IE  支持事件由内向外 --- 事件冒泡
        // 网景  支持事件由外向内 ---  事件捕获

        // 最终  主流浏览器同时支持冒泡流和捕获流  --- 默认支持事件冒泡


        // 事件流的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段




        var oBox = document.querySelector('.box');
        var oA = document.querySelector('.a');

        var oA1 = document.querySelector('.a1');

        oBox.onclick = function () {
            console.log('box');
        }

        oA.onclick = function () {
            console.log('a');
        }

        oA1.onclick = function (e) {
            // 阻止事件向外传播
            // e.cancelBubble = true ;   // 低版本IE浏览器上使用这个属性阻止事件冒泡
            // e.stopPropagation();
            if (e.cancelBubble) {
                e.cancelBubble = true;
            }
            else {
                e.stopPropagation();
            }
            console.log('a1');
        }





    </script>

</body>

</html>